<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <div id="myChart2" style="width: 100%; height: 300px"></div>
      </el-row>
    </el-row>
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <el-table v-loading="loading" :data="msgList">
          <el-table-column label="ID" align="center" prop="msgId" />
          <el-table-column label="标题" align="center" prop="title" />
          <el-table-column label="内容" align="center" prop="content">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="showDetail(scope.row)"
                >预览</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="state"
            :formatter="stateFormat"
          />

          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <el-dialog
          title="信息"
          :visible.sync="detailOpen"
          width="800px"
          append-to-body
        >
          <el-row class="content" v-html="content"></el-row>
        </el-dialog>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "../../dashboard/PanelGroup";
import LineChart from "../../dashboard/LineChart";
import RaddarChart from "../../dashboard/RaddarChart";
import PieChart from "../../dashboard/PieChart";
import BarChart from "../../dashboard/BarChart";
import {
  listMsg,
  getMsg,
  delMsg,
  addMsg,
  updateMsg,
  exportMsg,
} from "@/api/system/msg";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
import { listData } from "@/api/system/data";
import { listAddress,index } from "@/api/system/address";
import { maxlist } from "@/api/system/data";
import { mapState, mapMutations, mapAction } from "vuex";
import store from "@/store";
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      detailOpen: false,
      content: "",
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 消息提醒表格数据
      msgList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态字典
      stateOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        content: undefined,
        state: "未读",
        toUser: undefined,
        createBy: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      myName: "",
      lineChartData: lineChartData.newVisitis,
    };
  },
  created() {
    this.getList();
    this.getDicts("msg_status").then((response) => {
      this.stateOptions = response.data;
    });
    listData({}).then((response) => {
      var ar = {};
      this.dataList = response.rows;
      this.dataList = this.dataList.sort(function (a, b) {
        return a.dataId - b.dataId;
      });
      var times = [];
      var wendu = [];
      var shidu = [];
      var qiya = [];
      var pm25 = [];
      var pm10 = [];
      var aqi = [];
      this.dataList.forEach((e) => {
        if (ar[e.wuran] == undefined) {
          ar[e.wuran] = 1;
        } else {
          ar[e.wuran] = ar[e.wuran] + 1;
        }
        times.push(e.createTime);
        wendu.push(e.wendu);
        shidu.push(e.shidu);
        qiya.push(e.qiya);
        pm25.push(e.pm25);
        pm10.push(e.pm10);
        aqi.push(e.aqi);
      });
      var op2 = {
        title: {
          text: "指标监测",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["温度", "湿度", "气压", "PM2.5", "PM10", "AQI"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: times,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "温度",
            type: "line",
            stack: "总量",
            data: wendu,
          },
          {
            name: "湿度",
            type: "line",
            stack: "总量",
            data: shidu,
          },
          {
            name: "气压",
            type: "line",
            stack: "总量",
            data: qiya,
          },
          {
            name: "PM2.5",
            type: "line",
            stack: "总量",
            data: pm25,
          },
          {
            name: "PM10",
            type: "line",
            stack: "总量",
            data: pm10,
          },
          {
            name: "AQI",
            type: "line",
            stack: "总量",
            data: aqi,
          },
        ],
      };
      let myChart2 = echarts.init(document.getElementById("myChart2"));
      myChart2.setOption(op2);
    });
  },
  methods: {
    getList() {
      this.loading = true;
      var that = this;
      this.$store.dispatch("GetInfo").then((res) => {
        that.myName = res.user.userName;
        that.queryParams.toUser = that.myName;
        listMsg(that.queryParams).then((response) => {
          that.msgList = response.rows;
          that.total = response.total;
          that.loading = false;
        });
      });
    },
    // 状态字典翻译
    stateFormat(row, column) {
      return this.selectDictLabel(this.stateOptions, row.state);
    },
    showDetail(content) {
      this.form = content;
      this.form.state = "已读";
      updateMsg(this.form).then((response) => {
        if (response.code === 200) {
          this.content = content.content;
          this.detailOpen = true;
          this.getList();
        } else {
          this.msgError(response.msg);
        }
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
